<!DOCTYPE html>
<html>
  <head>
    <title>追帧播放器</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
      name="viewport"
    />
    <style>    
      .centeredVideo {
          display: block;
          width: 100vw;
          height: 100vh;
          max-width: 1280px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: auto;
      }
    </style>
    <script src="EasyPlayer-element.min.js"></script>
    <script>
        async function load() {
            const resp = await fetch('/url')
            const url = (await resp.json()).url
            console.log(`load url ${url}`)
            var player = document.getElementsByClassName('centeredVideo')[0];
            player.setAttribute("video-url", url)
        }
        document.addEventListener('DOMContentLoaded', load);
    </script>
  </head>
  <body>
    <easy-player
      class="centeredVideo"
      live="true"
      muted="false"
      easy-stretch="false"
    ></easy-player>
  </body>
</html>